import React from "react"
import { useSelector } from "react-redux"
export default function Header() {
  const user = useSelector(state => state.user.user)

  return (
    <nav className="navbar navbar-light">
      <div className="container">
        <a className="navbar-brand" href="index.html">
          conduit
        </a>
        <ul className="nav navbar-nav pull-xs-right">
          <li className="nav-item">
            {/* Add "active" class when you're on that page" */}
            <a href="/" className="nav-link active">
              Home
            </a>
          </li>

          <li className="nav-item">
            {user ? (
              <>
                <li className="nav-item">
                  <a href="/app/create" className="nav-link">
                    <i className="ion-compose" />
                    &nbsp;New Post
                  </a>
                </li>
                <li className="nav-item">
                  <a href="/app/settings" className="nav-link">
                    <i className="ion-gear-a" />
                    &nbsp;Settings
                  </a>
                </li>
                <a className="nav-link">{user.username}</a>
              </>
            ) : (
              <a className="nav-link" href="/login">
                Sign up
              </a>
            )}
          </li>
        </ul>
      </div>
    </nav>
  )
}
